<template>
  <div class="common-layout">
    <el-container>
      <el-scrollbar>
        <el-aside width="200px">
          <el-menu class="el-menu-vertical-demo" default-active="2" router>
            <template v-for="item in routerList.options.routes">
              <template v-if="!item.children">
                <el-menu-item :index="item.path" :key="item.name">
                  <el-icon><icon-menu /></el-icon>
                  <span>{{ item.meta?.title || item.name }}</span>
                </el-menu-item>
              </template>

              <template v-else>
                <el-sub-menu :index="item.path" :key="item.name">
                  <template #title>
                    <el-icon><location /></el-icon>
                    <span>权限管理</span>
                  </template>

                  <el-menu-item
                    :index="sonItem.path"
                    v-for="sonItem in item.children"
                    :key="sonItem.name"
                    >{{ sonItem.meta?.title || sonItem.name }}</el-menu-item
                  >
                </el-sub-menu>
              </template>
            </template>
          </el-menu>
        </el-aside>
      </el-scrollbar>
      <el-container>
        <el-header>
          Header

          <el-switch
            width="45px"
            v-model="value1"
            :inactive-action-icon="Sunny"
            :active-action-icon="Moon"
          />
        </el-header>
        <el-main>
          <RouterView></RouterView>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { Menu as IconMenu, Location } from '@element-plus/icons-vue'
import router from '@/router'
import { ref, watch } from 'vue'
import 'element-plus/theme-chalk/el-message.css'
import { useDark } from '@vueuse/core'
import { Sunny, Moon } from '@element-plus/icons-vue'
const routerList = ref<any>(router)
const value1 = ref(false)

const isDark = useDark()

// const toggleDark = () => {
//   isDark.value = !isDark.value
// }

// 监听 value1 的变化，并更新暗黑模式状态
watch(value1, (newValue) => {
  isDark.value = newValue
})

// // 监听暗黑模式的变化，并更新 value1 的状态
// onMounted(() => {})
watch(isDark, (newValue) => {
  value1.value = newValue
})
</script>

<style lang="scss" scoped>
.common-layout {
  height: 100vh;
  .el-container {
    height: 100%;
  }
  // .el-aside {
  //   background-color: skyblue;
  // }
  // .el-header {
  //   background-color: aquamarine;
  // }
  // .el-main {
  //   background-color: bisque;
  //   // height: calc(100vh - 120px);
  // }
  // .el-footer {
  //   background-color: plum;
  // }
}
</style>
